<template>
  <div class="approval-node-opr">
    <div>
      <div class="approcal-node-opr-title">
        <h3>{{ approvalNode.nodeName }}</h3>
        <span class="status-color-2">（待审批）</span>
      </div>
      <div class="wait-time">等待时间: {{ approvalNode.waitTime }}</div>
    </div>
    <Form :model="form" :rules="formRules" ref="form">
      <FormItem prop="approvalMsg">
        <Input :rows="3" placeholder="输入审批意见" type="textarea" v-model="form.approvalMsg" />
      </FormItem>
    </Form>
    <div class="btn-group">
      <!-- <Button @click="handleBackClick" ghost size="small" type="primary">打回上一步</Button> -->
      <Button @click="handleBackFirstClick" ghost size="small" type="primary">打回发起人</Button>
      <Button @click="handlePassClick" size="small" type="primary">同意</Button>
    </div>
  </div>
</template>

<script>
import {
  approvalNodeOpr,
  approvalNodeBackFirst,
  approvalNodeBack
} from '@/api/approval.js';

export default {
  props: {
    approvalNode: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      form: {
        approvalMsg: ''
      },
      formRules: {
        approvalMsg1: [
          { required: true, message: '请输入审批意见', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleBackClick () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$Modal.confirm({
            title: '提示',
            content: '<p>是否打回上一步？</p>',
            loading: true,
            onOk: async () => {
              const data = {
                'nodeId': this.approvalNode.nodeId,
                'opinions': this.form.approvalMsg
              };
              await approvalNodeBack(data);
              this.$Modal.remove();
              this.$router.go(-1);
            }
          });
        }
      });
    },
    handleBackFirstClick () {
      this.$refs.form.validate(valid => {
        console.log(77744, this.approvalNode.nodeId, this.form.approvalMsg);
        if (valid) {
          this.$Modal.confirm({
            title: '提示',
            content: '<p>是否打回发起人？</p>',
            loading: true,
            onOk: async () => {
              const data = {
                'nodeId': this.approvalNode.nodeId,
                'opinions': this.form.approvalMsg
              };
                // console.log('打回发起人data', JSON.stringify(data, 2, 2));
              await approvalNodeBackFirst(data);
              this.$Modal.remove();
              this.$router.go(-1);
            }
          });
        }
      });
    },
    handlePassClick () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$Modal.confirm({
            title: '提示',
            content: '<p>是否审批通过？</p>',
            loading: true,
            onOk: async () => {
              const data = {
                nodeids: this.approvalNode.nodeId,
                optinions: this.form.approvalMsg
              };
              //   console.log('审批data', JSON.stringify(data, 2, 2));
              await approvalNodeOpr(data);
              this.$Modal.remove();
              this.$router.go(-1);
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.approval-node-opr {
  width: 90%;
  margin: 10px auto;
}
.approcal-node-opr-title {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.status-color-2 {
  color: #e6a23c;
}
.wait-time {
  color: #999;
  margin-bottom: 5px;
}
.btn-group {
  margin: 0 0 0 5px;
  display: flex;
  justify-content: flex-end;
  .ivu-btn {
    margin-left: 5px;
  }
}
</style>
